<template>
  <div>
    <p class="title">热搜管理</p>
    <div class="search-box">
      <div>
        <label>状态：</label>
        <el-select v-model="state" size="small" placeholder="请选择" @change="query">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </div>
      <el-input v-model="keywords" @input="query" class="input" size="small" prefix-icon="el-icon-search" placeholder="搜索热搜名称"></el-input>

    </div>
    <div class="add-box">
      <el-button @click="dialogFormVisible=true;edit_create=1" type="primary" size="small">新建</el-button>
    </div>

    <!-- 表格 -->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" border>

      <el-table-column label="序号" width="80" type="index"></el-table-column>
      <el-table-column prop="hsName" label="热搜名称" width="120">
      </el-table-column>
      <el-table-column prop="hsVolume" label="搜索量">
      </el-table-column>
      <el-table-column prop="orders" label="排序">
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state=='1'">上架</span>
          <span v-else>下架</span>
        </template>
      </el-table-column>
      <el-table-column prop="activeTime" label="操作">
        <template slot-scope="scope">
          <el-button @click="showGift(scope.row.hsId)" type="text" size="small">编辑</el-button>
          <el-button type="text" @click="updateHotSearchState(scope.row.hsId,2)" v-if="scope.row.state == 1">下架</el-button>
          <el-button type="text" @click="updateHotSearchState(scope.row.hsId,1)" v-else-if="scope.row.state == 2">上架</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <page :total="total" :PageNumber.sync="pageNum" :PageSize.sync="pageSize" @current-change="changeCurrentPage"
        @size-change="handleSizeChange">
    </page>
    <!-- 新建/编辑 -->
    <el-dialog title="新建" center :visible.sync="dialogFormVisible" width="600px">
      <el-form :model="form" label-width="120px">
        <el-form-item label="热搜名称：">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="钻石状态：">
          <el-radio-group v-model="form.state">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
        <el-button type="primary" v-if="edit_create == 1" @click="insertHotSearch" size="small">确 定</el-button>
        <el-button type="primary" v-if="edit_create == 2" @click="updateHotSearch" size="small">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import page from "@/components/page"
  import apis from "../../../apis/modules/hotSearch"
  export default {
    components: {
      page
    },
    data() {
      return {
        dialogFormVisible: false,
        form: {},
        state: 'all',
        keywords: '',
        options: [{ value: 'all', label: "全部" }, { value: 1, label: "已上架" }, { value: 2, label: "已下架" }],
        tableData: [],
        pageNum: 1,
        pageSize: 10,
        total: 0,
        edit_create : 1
      };
    },

    methods: {
      //获取热搜列表
      getHotSearch(){
        apis.getHotSearch(this.state, this.keywords, this.pageNum, this.pageSize).then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.total = res.data.count;
          }
        });
      },
      updateHotSearchState(hsId,state){
        apis.updateHotSearchState({hsId : hsId,state : state}).then((res) => {
          if (res.code == 200) {
            this.getHotSearch();
          }
        });
      },
      ShowHotSearch(hsId){
        apis.ShowHotSearch({hsId : hsId}).then((res) => {
          if (res.code == 200) {
            this.dialogFormVisible=true
            this.edit_create = 2;
            this.form = res.data;
            this.form.state = parseInt(this.form.state);
          }
        })
      },
      updateHotSearch(){
        apis.updateHotSearch(this.form).then((res) => {
          if (res.code == 200) {
            this.dialogFormVisible=false
            this.getHotSearch();
          }
        })
      },
      insertHotSearch(){
        apis.insertHotSearch(this.form).then((res) => {
          if (res.code == 200) {
            this.dialogFormVisible = false
            this.getHotSearch();
          }
        })
      },
      query(){
        this.pageNum = 1;
        this.getHotSearch();
      },
      changeCurrentPage(){
        this.getHotSearch();
      },
      handleSizeChange(){
        this.getHotSearch();
      }
    },
    mounted() {
      this.getHotSearch();
    }
  };
</script>

<style lang="scss" scoped>
  .search-box {
    margin: 32px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .input{
    width: 400px;
  }
  .add-box{
    text-align: right;
  }
</style>
